<template>
    <section>
        <div class="rowThree">
            <ul>
                <li v-for="(bigNavs,index) in bigNav" :key="index" :class="{bgWhite:index==liIndex}">
                    <a href="javascript:;" @mouseover="change(index)" @mouseout="recover(index)" :class="{colorRed:index==liIndex}" @click="headRoute(index)">{{bigNavs}}</a>
                </li>
            </ul>
        </div>
	</section>
</template>
<script>
export default {
    data(){
        return {
            bigNav: ["热销媒体", "APP矩阵", "DSP营销", "SEM营销"],
            liIndex:999,
            headRouteVar:["/view2/hotMedia","/view2/appRect","/view2/DSPSale","/view2/SEMSale"]

        }
    },
    methods:{
        change(index){
            this.liIndex = index
        },
        recover(index){
            this.liIndex = 999
        },
        headRoute(index){
            this.$router.push({path:this.headRouteVar[index]})
        },
    }
};
</script>
<style scoped>
section {
  width: 100%;
  height: 46px;
  background-color: #ee4041;
}
.rowThree {
  width: 1200px;
  margin: 0 auto;
}
.rowThree ul li {
  float: left;
  width: 90px;
  height: 46px;
  line-height: 46px;
  text-align: center;
}
.rowThree ul li a {
  color: #fff;
  font-size: 16px;
}
.bgWhite{
   background:#fff; 
}
.rowThree ul li a.colorRed{
    color:#ee4041;
}
</style>


